<template>
  <div id="header">
    <div class="box">
      <div class="left-box">
        <div class="logo" @click="$router.push('/')">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div class="navigation-box">
          <i @click="goBack" class="iconfont icon-fenxiang back"></i>
          <i @click="goForward" class="iconfont icon-right forward"></i>
        </div>

        <div class="search-bar" :class="{ 'search-bar-active': isFocus }">
          <i class="el-icon-search"></i>
          <input
            type="text"
            v-model="keyword"
            @focus="isFocus = true"
            @blur="isFocus = false"
          />
          <span @click="LinkToSearch" class="search-btn">搜索</span>
        </div>
        <div class="nav-box">
          <div
            class="nav-item"
            :class="{ 'nav-active': navIndex == 0 }"
            @click="$router.push('/')"
          >
            <i class="iconfont icon-whole"></i>艺术品
          </div>
          <div
            class="nav-item"
            :class="{ 'nav-active': navIndex == 1 }"
            @click="$router.push('/collections')"
          >
            <i class="iconfont icon-fenlei"></i>合集
          </div>
          <div
            class="nav-item"
            :class="{ 'nav-active': navIndex == 2 }"
            @click="$router.push('/hot')"
          >
            <i class="iconfont icon-hot"></i>热门
          </div>
        </div>
      </div>
      <div class="right-box">
        <div
          class="small-btn search-small-btn"
          @click="$router.push('/searchpage')"
        >
          <i class="el-icon-search"></i>
        </div>
        <div
          class="small-btn more-small-btn"
          @click="isShowDropdown = !isShowDropdown"
        >
          <i
            class="iconfont"
            :class="{
              'icon-more1': !isShowDropdown,
              'icon-quxiao': isShowDropdown,
            }"
          ></i>
        </div>
        <!-- 创作和登录按钮 -->
        <div class="big-btn-box">
          <router-link to="/create">
            <div class="create-btn r-btn">创作</div>
          </router-link>
          <div
            class="login-btn r-btn"
            @click="$store.dispatch('showLogin', true)"
            v-if="userInfo.user_address == null"
          >
            登录
          </div>
        </div>
        <!-- 用户头像 -->
        <el-dropdown
          @command="handleCommand"
          v-if="userInfo.user_address != null"
        >
          <div class="user-box">
            <div class="user-avatar">
              <img
                @click="$router.push('/user/' + userInfo.user_address)"
                :src="userInfo.logo | ipfsHash"
                alt=""
                v-if="userInfo.logo != null"
              />
              <!-- 随机头像 -->
              <RandomAvatar
                :user_address="userInfo.user_address"
                v-if="userInfo.logo == null"
              />
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user-solid" command="user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-switch-button" command="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-collapse-transition>
        <div v-if="isShowDropdown" class="dropdown-panel">
          <div class="dropdown-nav-box">
            <div
              class="nav-item"
              :class="{ 'nav-active': navIndex == 0 }"
              @click="
                $router.push('/');
                isShowDropdown = false;
              "
            >
              <i class="iconfont icon-whole"></i>艺术品
            </div>
            <div
              class="nav-item"
              :class="{ 'nav-active': navIndex == 1 }"
              @click="
                $router.push('/collections');
                isShowDropdown = false;
              "
            >
              <i class="iconfont icon-fenlei"></i>合集
            </div>
            <div
              class="nav-item"
              :class="{ 'nav-active': navIndex == 2 }"
              @click="
                $router.push('/hot');
                isShowDropdown = false;
              "
            >
              <i class="iconfont icon-hot"></i>热门
            </div>

            <div class="btn-group" @click="isShowDropdown = false">
              <router-link to="/create">
                <div class="create-btn r-btn">创作</div>
              </router-link>
              <div
                class="login-btn r-btn"
                @click="$store.dispatch('showLogin', true)"
              >
                登录
              </div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <Login />
  </div>
</template>

<script>
import Login from "./Login";
// 随机头像组件
import { mapState } from "vuex";
export default {
  name: "Header",
  components: { Login },
  watch: {
    "$route.path": {
      immediate: true,
      handler(newValue) {
        this.navIndex = -1;
        this.navs.forEach((item) => {
          if (newValue.indexOf(item.type) == 0) {
            this.navIndex = item.id;
          }
        });
      },
    },
  },
  data() {
    return {
      navIndex: 0,
      navs: [
        { id: 0, label: "艺术品", type: "/artwork" },
        { id: 1, label: "合集", type: "/collections" },
        { id: 2, label: "热门", type: "/hot" },
      ],
      keyword: "",
      // 是否聚焦搜索框
      isFocus: false,

      // 是否展示下拉框
      isShowDropdown: false,

      // 无头像的随机样式
      randerAvatar: {},
    };
  },
  mounted() {
    if (localStorage.getItem("token")!=null) {
      this.$store.dispatch("userInfo");
    }
  },
  computed: {
    ...mapState({
      userInfo: (store) => store.user.userInfo,
    }),
  },
  // watch: {
    // 根据地址生成渐变头像
    // "userInfo.user_address"(newValue) {
    //   let addressRander = parseInt(newValue, 16).toString(10);
    //   let r = this.rand(255, addressRander.slice(4, 8))
    //   let g = this.rand(255, addressRander.slice(8, 12))
    //   let b = this.rand(255, addressRander.slice(12, 16))
    //   this.randerAvatar = {
    //     width: "100%",
    //     height: "100%",
    //     "background-image": `linear-gradient(to bottom right, rgb(${r},${g},${b}), rgb(${b},${r},${g}))`,
    //   };
    // },
  // },
  inject: ["reload"],
  methods: {
    // 历史后退
    goBack() {
      this.$router.back();
    },
    // 历史前进
    goForward() {
      this.$router.forward();
    },
    // 搜索
    LinkToSearch() {
      this.$router.push(`/search?keyword=${this.keyword}`);
      // 清空
      this.keyword = "";
    },

    // 退出登录
    handleCommand(command) {
      if (command == "logout") {
        // 清空本地存储
        localStorage.removeItem("token");
        linkToLogin("退出登录成功")
      } else if (command == "user") {
        this.$router.push("/user/" + this.userInfo.user_address);
      }
    },
  },
};
</script>

<style lang='less'>
@media screen and (max-width: 855px) {
  #header {
    .search-bar {
      display: none !important;
    }
    .search-small-btn {
      display: flex !important;
    }
  }
}
@media screen and (max-width: 690px) {
  #header {
    .nav-box {
      display: none !important;
    }
    .more-small-btn {
      display: flex !important;
    }
    .big-btn-box {
      display: none !important;
    }
    .dropdown-panel {
      display: block !important;
    }
  }
}
#header {
  .box {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    background: rgba(248, 248, 248, 0.7);
    justify-content: space-between;
    backdrop-filter: blur(30px);
    .left-box {
      display: flex;
      .logo {
        cursor: pointer;
        font-weight: bold;
        font-size: 20px;
        height: 30px;
        img{
          height: 100%;
        }
      }
      .navigation-box {
        margin-left: 20px;
        height: 28px;
        display: flex;
        align-items: center;
        i {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 50%;
          padding: 5px;
          cursor: pointer;
        }
        i:hover {
          transition: 300ms;
          transform: scale(1.1);
        }
        .forward {
          margin-left: 10px;
        }
      }

      .search-bar {
        width: 200px;
        height: 28px;
        margin-left: 10px;
        background: rgba(80, 80, 80, 0.1);
        border-radius: 56px;
        display: flex;
        align-items: center;
        i {
          margin-left: 10px;
          font-size: 14px;
          vertical-align: -4px;
        }
        input {
          flex: 1;
          border: 0;
          background: rgba(0, 0, 0, 0);
          height: 100%;
          margin-left: 10px;
          outline-style: none;
          width: 100%;
          color: #999;
        }
        .search-btn {
          cursor: pointer;
          font-size: 14px;
          color: #999;
          margin-right: 10px;
          margin-left: 10px;
        }
      }
      .search-bar-active {
        background: #fff;
        input {
          color: #333;
        }
      }
      .nav-box {
        margin-left: 20px;
        display: flex;
        .nav-item {
          cursor: pointer;
          font-size: 16px;
          padding: 0 5px;
          margin-right: 10px;
          padding-bottom: 5px;
          i {
            margin-right: 5px;
          }
        }
        .nav-item:hover {
          font-weight: bold;
        }
        .nav-active {
          font-weight: bold;
          border-bottom: 3px solid var(--themeColor1);
        }
      }
    }

    .right-box {
      .small-btn {
        cursor: pointer;
        margin-right: 15px;
        display: none;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: #666;
        width: 28px;
        height: 28px;
        background: rgba(80, 80, 80, 0.1);
        i {
          font-size: 14px;
          vertical-align: -4px;
        }
      }
      display: flex;
      align-items: center;
      .big-btn-box {
        display: flex;
        align-items: center;
        .r-btn:hover {
          opacity: 0.5;
          transition: 0.5s;
        }
        .r-btn {
          padding: 8px 15px;
          border-radius: 20px;
          font-size: 14px;
          cursor: pointer;
        }
        .login-btn {
          margin-left: 10px;
          background: var(--themeColor1);
          color: #fff;
        }
        .create-btn {
          background: var(--themeColor2);
          color: #fff;
        }
      }

      .user-box {
        .user-avatar {
          cursor: pointer;
          margin-left: 10px;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            border-radius: 50%;
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .dropdown-panel {
      top: 65px;
      left: 0;
      right: 0;
      // padding: 20px;
      display: none;
      position: absolute;
      padding-bottom: 10px;
      background: rgb(243, 243, 243);
      width: 100%;
      .dropdown-nav-box {
        margin: 10px 20px;
        .nav-item {
          cursor: pointer;
          font-size: 16px;
          padding: 0 5px;
          margin-right: 10px;
          padding-bottom: 5px;
          margin-top: 20px;
          i {
            margin-right: 5px;
          }
        }
        .nav-item:hover {
          font-weight: bold;
        }
        .nav-active {
          font-weight: bold;
          color: var(--themeColor1);
        }
      }

      .r-btn:hover {
        opacity: 0.5;
        transition: 0.5s;
      }
      .r-btn {
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        margin-top: 10px;
        display: inline-block;
      }
      .login-btn {
        background: var(--themeColor1);
        color: #fff;
      }
      .create-btn {
        margin-right: 10px;
        background: var(--themeColor2);
        color: #fff;
      }
    }
  }
}
</style>